import React, { Component } from 'react'

import './Parent.css'

// 引入子组件
import Child from './Child'

export default class Parent extends Component {

  // 父组件状态数据
  state = {
    parentData: "父组件DATA数据",
    fromChild: "等待接收子组件数据"
  }

  // 给变量赋值函数
  getData(dat) {
    this.setState({
      fromChild: dat
    })
  }

  render() {
    return (
      <div className="parent-container">
        父组件
        <p>内部数据：{this.state.parentData}</p>
        <p>来自子组件数据：{this.state.fromChild}</p>
        {/* 
          通过自定义属性将数据传递给子组件 
          自定义属性的名称开发人员随便命名，建议做到见名知意
        */}
        {/*
          子父组件传值：将自定义赋值函数，当成自定义属性传递给子组件
          子组件内部可以通过自定义属性调用执行父组件中的函数
        */}
        <Child fromParent={this.state.parentData}
          sendData={this.getData.bind(this)}
        ></Child>
      </div>
    )
  }
}
